<template>
  <div class="app-container">
    <el-row class="margin-bottom-10">
      <el-col>
        <el-button size="small" @click="addOpen">添加分类</el-button>
        <el-button size="small">删除</el-button>
      </el-col>
    </el-row>

    <el-table
      ref="singleTable"
      :data="tableData"
      highlight-current-row
      border
      style="width: 100%"
    >
      <el-table-column type="select" width="50" />
      <el-table-column property="key" label="类型">
        <template slot-scope="{ row, $index }">
          <span v-text="row.key">{{ $index }}</span>
        </template>
      </el-table-column>
      <el-table-column property="title" label="名称">
        <template slot-scope="{ row, $index }">
          <span v-text="row.title">{{ $index }}</span>
        </template>
      </el-table-column>
      <el-table-column property="key" label="图片">
        <template slot-scope="{ row, $index }">
          <img :src="row.cover" :alt="$index" />
        </template>
      </el-table-column>
      <el-table-column property="c_time" label="创建时间">
        <template slot-scope="{ row, $index }">
          <span v-text="row.c_time">{{ $index }}</span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="title" :visible.sync="dialogTableVisible" top="15px">
      <div class="height-480 overflow-y-auto">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="分类名称" prop="title">
            <el-input v-model="ruleForm.title"></el-input>
          </el-form-item>
          <el-form-item label="是否展示" prop="delivery">
            <el-switch v-model="ruleForm.delivery"></el-switch>
          </el-form-item>
          <el-form-item label="分类类型" prop="key">
            <el-checkbox-group v-model="ruleForm.key">
              <el-checkbox
                v-for="item in tabsData"
                :label="item.lable"
                :key="item.value"
              ></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </div>

      <div slot="footer">
        <el-button type="primary" @click="submitForm('ruleForm')">
          立即创建
        </el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getDictionaries, getClassify } from "@/api/table";
export default {
  name: "classify",
  data() {
    return {
      title: "",
      active_name: null,
      dialogTableVisible: null,
      tabsData: [],
      tableData: [],
      ruleForm: {
        name: "",
        region: "",
        date1: "",
        date2: "",
        delivery: false,
        key: [],
        resource: "",
        desc: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        key: [
          { required: true, message: "请选择分类区域", trigger: "change" },
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change",
          },
        ],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change",
          },
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个分类性质",
            trigger: "change",
          },
        ],
        resource: [
          { required: true, message: "请选择分类资源", trigger: "change" },
        ],
        desc: [{ required: true, message: "请填写分类形式", trigger: "blur" }],
      },
    };
  },
  mounted() {
    this.getDictionaries();
  },
  methods: {
    addOpen() {
      this.dialogTableVisible = true;
      console.log(this.tabsData);
    },
    getDictionaries() {
      getDictionaries().then((res) => {
        this.tabsData = res.data.lists;
        this.active_name = res.data.lists[0].key;
        // this.getClassify();
      });
    },
    getClassify() {
      getClassify({ page: this.page, key: this.active_name }).then((res) => {
        this.tableData = res.data.list;
      });
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>
